<template>
  <div style="width:60%;">
    <a-modal v-model="reVisible"
             width="50%"
             title="新增任务提醒"
             @ok="handleOk">
      <a-form-model ref="remind"
                    :model="remind"
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 22 }"
                    :rules="{
                      remindModeArray: [{ required: true, message: '请选择提醒方式' }],
                    }">
        <a-form-model-item :label-col="{ span: 2 }"
                           :wrapper-col="{ span: 22 }"
                           label="提醒时间">
          <a-row>
            <a-col :span="6">
              <a-select style="width: 100%"
                        v-model="remind.remindType">
                <a-select-option value="0"> 任务开始前 </a-select-option>
                <a-select-option value="1"> 任务截止前 </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="1"> </a-col>
            <a-col :span="6">
              <a-input-number :min="0"
                              style="width: 100%"
                              v-model="remind.unitValue"
                              placeholder="请输入">
              </a-input-number>
            </a-col>
            <a-col :span="1"> </a-col>
            <a-col :span="6">
              <a-select style="width: 100%"
                        v-model="remind.unit">
                <a-select-option value="minute"> 分钟 </a-select-option>
                <a-select-option value="hour"> 小时 </a-select-option>
                <a-select-option value="day"> 天 </a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item prop="remindModeArray"
                           @change="remindChange"
                           label="提醒方式">
          <a-checkbox-group v-model="remind.remindModeArray">
            <a-checkbox value="0"> 站内消息 </a-checkbox>
            <a-checkbox value="1"> 短信 </a-checkbox>
            <a-checkbox value="2"> 政务钉钉 </a-checkbox>
            <a-checkbox value="3"> 魔粒APP推送 </a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-form-model ref="form"
                  :model="form"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 16 }"
                  :rules="{
                    jobName: [{ required: true, message: '请输入页面名称' }],
                    startTime: [{ required: true, message: '请输入开始时间' }],
                  }">
      <a-form-model-item label="任务名称"
                         prop="jobName"
                         required>
        <a-input v-model="form.jobName"
                 placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="任务描述"
                         prop="jobDesc">
        <a-textarea v-model="form.jobDesc"
                    placeholder="请输入"
                    :auto-size="{ minRows: 3, maxRows: 5 }" />
      </a-form-model-item>
      <a-divider orientation="left">提醒策略</a-divider>
      <a-form-model-item label="重复周期"
                         prop="jobRepetitionType">
        <a-select style="width: 100%"
                  v-model="form.jobRepetitionType">
          <a-select-option value="norepeat"> 不重复 </a-select-option>
          <a-select-option value="day"> 每天重复 </a-select-option>
          <a-select-option value="week"> 每周重复 </a-select-option>
          <a-select-option value="month"> 每月重复 </a-select-option>
          <a-select-option value="quarter"> 每季重复 </a-select-option>
          <a-select-option value="year"> 每年重复 </a-select-option>
          <a-select-option value="weekday"> 工作日重复 </a-select-option>
          <a-select-option value="custom"> 自定义重复 </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="开始时间"
                         prop="startTime"
                         required>
        <a-date-picker style="width: 100%"
                       v-model="form.startTime"
                       show-time
                       clearable
                       format="YYYY-MM-DD HH:mm" />
      </a-form-model-item>

      <a-form-model-item label="结束重复"
                         v-if="form.jobRepetitionType != 'norepeat'">
        <a-select style="width: 100%"
                  v-model="form.endRepetitionType">
          <a-select-option value="0"> 一直重复 </a-select-option>
          <a-select-option value="1"> 按日期结束 </a-select-option>
          <a-select-option value="2"> 按次数结束 </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="截止时间"
                         prop="endTime"
                         v-if="
                           form.jobRepetitionType == 'norepeat' || form.endRepetitionType == 1
                         ">
        <a-date-picker style="width: 100%"
                       v-model="form.endTime"
                       show-time
                       clearable
                       format="YYYY-MM-DD HH:mm" />
      </a-form-model-item>
      <a-form-model-item label="重复次数"
                         prop="endNumber"
                         v-if="
                           form.jobRepetitionType != 'norepeat' && form.endRepetitionType == 2
                         ">
        <a-input-number placeholder="请输入"
                        style="width: 100%"
                        v-model="form.endNumber"
                        :min="1"
                        :max="10000" />
      </a-form-model-item>
      <div v-if="form.jobRepetitionType == 'custom'">
        <a-form-model-item label="每"
                           :colon="false"
                           prop="">
          <!-- <a-col :span="1"><b>每</b></a-col> -->
          <a-col :span="11">
            <a-input-number placeholder="请输入间隔时间"
                            style="width: 100%"
                            v-model="form.intervalNumber"
                            :min="1"
                            :max="10000" />
          </a-col>
          <a-col :span="1"></a-col>
          <a-col :span="12">
            <a-select style="width: 100%"
                      v-model="form.customType">
              <a-select-option value="day"> 天 </a-select-option>
              <a-select-option value="week"> 周 </a-select-option>
              <a-select-option value="month"> 月 </a-select-option>
            </a-select>
          </a-col>
        </a-form-model-item>
        <a-form-model-item v-if="form.intervalNumber"
                           label=" "
                           :colon="false">
          <font color="#999999">每{{ form.intervalNumber
          }}{{
            form.customType == 'day'
              ? '天'
              : form.customType == 'week'
                ? '周'
                : '个月,'
          }}{{
            form.customType == 'week'
              ? ',' +
                selectWeeks
                  .map((item) => {
                    return '周' + item.title
                  }).toString()
              : form.customType == 'month'
                ? selectDays
                  .map((item) => {
                    return item.title
                  })
                  .toString() + '号'
                : ''
          }}
            重复</font>
        </a-form-model-item>
        <a-form-model-item label=" "
                           :colon="false"
                           v-if="form.customType != 'day'">
          <!-- 重复时间为1周（每周重复） -->
          <div class="weeks-panel"
               v-if="form.customType == 'week'">
            <div class="weeks-panel-item"
                 :class="{ active: week.selected }"
                 v-for="(week, index) in weeks"
                 :key="index"
                 @click="handleWeek(week, index)">
              {{ week.title }}
            </div>
          </div>
          <!-- 重复时间为1月（每月重复） -->
          <div class="days-panel"
               v-if="form.customType == 'month'"
               style="margin-top: 20px">
            <div class="days-panel-item"
                 :class="{ active: day.selected }"
                 v-for="(day, index) in days"
                 :key="index"
                 @click="handleDay(day, index)">
              {{ day.title }}
              <!-- <a-icon type="check"
                      v-if="day.selected" /> -->
            </div>
          </div>
        </a-form-model-item>

        <a-form-model-item label="跳过法定节假日"
                           prop="">
          <a-switch v-model="form.jumpHolodays"
                    checked-children="是"
                    un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="跳过双休日"
                           prop=""
                           v-if="form.customType != 'week'">
          <a-switch v-model="form.jumpWeekdays"
                    checked-children="是"
                    un-checked-children="否" />
        </a-form-model-item>
      </div>

      <a-form-model-item label="填报时间"
                         v-if="form.jobRepetitionType != 'norepeat'">
        <a-row>
          <a-col :span="4"
                 v-if="form.jobRepetitionType == 'quarter'">
            <a-select style="width: 100%"
                      v-model="jiduStart">
              <a-select-option value="1"> 第一个月 </a-select-option>
              <a-select-option value="2"> 第二个月 </a-select-option>
              <a-select-option value="3"> 第三个月 </a-select-option>
              <a-select-option value="4"> 第四个月 </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="
            form.jobRepetitionType == 'week' ||
              form.jobRepetitionType == 'month' ||
              form.jobRepetitionType == 'year'
              ? 5
              : form.jobRepetitionType == 'quarter'
                ? 4
                : 0
          ">
            <a-date-picker style="width: 100%"
                           v-if="form.jobRepetitionType == 'year'"
                           v-model="yearStart"
                           clearable
                           format="MM-DD" />
            <a-select style="width: 100%"
                      v-model="weekStart"
                      v-if="form.jobRepetitionType == 'week'">
              <a-select-option value="1"> 周一 </a-select-option>
              <a-select-option value="2"> 周二 </a-select-option>
              <a-select-option value="3"> 周三 </a-select-option>
              <a-select-option value="4"> 周四 </a-select-option>
              <a-select-option value="5"> 周五 </a-select-option>
              <a-select-option value="6"> 周六 </a-select-option>
              <a-select-option value="0"> 周日 </a-select-option>
            </a-select>
            <a-select style="width: 100%"
                      v-model="monthStart"
                      v-if="
                        form.jobRepetitionType == 'month' ||
                          form.jobRepetitionType == 'quarter'
                      ">
              <a-select-option value="1"> 1号 </a-select-option>
              <a-select-option value="2"> 2号 </a-select-option>
              <a-select-option value="3"> 3号 </a-select-option>
              <a-select-option value="4"> 4号 </a-select-option>
              <a-select-option value="5"> 5号 </a-select-option>
              <a-select-option value="6"> 6号 </a-select-option>
              <a-select-option value="7"> 7号 </a-select-option>
              <a-select-option value="8"> 8号 </a-select-option>
              <a-select-option value="9"> 9号 </a-select-option>
              <a-select-option value="10"> 10号 </a-select-option>
              <a-select-option value="11"> 11号 </a-select-option>
              <a-select-option value="12"> 12号 </a-select-option>
              <a-select-option value="13"> 13号 </a-select-option>
              <a-select-option value="14"> 14号 </a-select-option>
              <a-select-option value="15"> 15号 </a-select-option>
              <a-select-option value="16"> 16号 </a-select-option>
              <a-select-option value="17"> 17号 </a-select-option>
              <a-select-option value="18"> 18号 </a-select-option>
              <a-select-option value="19"> 19号 </a-select-option>
              <a-select-option value="20"> 20号 </a-select-option>
              <a-select-option value="21"> 21号 </a-select-option>
              <a-select-option value="22"> 22号 </a-select-option>
              <a-select-option value="23"> 23号 </a-select-option>
              <a-select-option value="24"> 24号 </a-select-option>
              <a-select-option value="25"> 25号 </a-select-option>
              <a-select-option value="26"> 26号 </a-select-option>
              <a-select-option value="27"> 27号 </a-select-option>
              <a-select-option value="28"> 28号 </a-select-option>
              <a-select-option value="29"> 29号 </a-select-option>
              <a-select-option value="30"> 30号 </a-select-option>
              <a-select-option value="L-1"> 倒数第二天 </a-select-option>
              <a-select-option value="L"> 倒数第一天 </a-select-option>
            </a-select>
          </a-col>

          <a-col :span="
            form.jobRepetitionType == 'day' ||
              form.jobRepetitionType == 'weekday' ||
              form.jobRepetitionType == 'custom'
              ? 11
              : form.jobRepetitionType == 'week' ||
                form.jobRepetitionType == 'month' ||
                form.jobRepetitionType == 'year'
                ? 5
                : 3
          ">
            <a-time-picker style="width: 100%"
                           v-model="form.startFillInTime"
                           clearable
                           format="HH:mm" />
          </a-col>
          <a-col :span="
                   form.jobRepetitionType == 'day' ||
                     form.jobRepetitionType == 'quarter' ||
                     form.jobRepetitionType == 'weekday' ||
                     form.jobRepetitionType == 'custom'
                     ? 2
                     : 4
                 "
                 style="text-align: center">
            至
          </a-col>
          <a-col :span="4"
                 v-if="form.jobRepetitionType == 'quarter'">
            <a-select style="width: 100%"
                      v-model="jiduEnd">
              <a-select-option value="1"> 第一个月 </a-select-option>
              <a-select-option value="2"> 第二个月 </a-select-option>
              <a-select-option value="3"> 第三个月 </a-select-option>
              <a-select-option value="4"> 第四个月 </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="
            form.jobRepetitionType == 'week' ||
              form.jobRepetitionType == 'month' ||
              form.jobRepetitionType == 'year'
              ? 5
              : form.jobRepetitionType == 'quarter'
                ? 4
                : 0
          ">
            <a-date-picker style="width: 100%"
                           v-model="yearEnd"
                           v-if="form.jobRepetitionType == 'year'"
                           clearable
                           format="MM-DD" />
            <a-select style="width: 100%"
                      v-model="weekEnd"
                      v-if="form.jobRepetitionType == 'week'">
              <a-select-option value="1"> 周一 </a-select-option>
              <a-select-option value="2"> 周二 </a-select-option>
              <a-select-option value="3"> 周三 </a-select-option>
              <a-select-option value="4"> 周四 </a-select-option>
              <a-select-option value="5"> 周五 </a-select-option>
              <a-select-option value="6"> 周六 </a-select-option>
              <a-select-option value="0"> 周日 </a-select-option>
            </a-select>
            <a-select style="width: 100%"
                      v-model="monthEnd"
                      v-if="
                        form.jobRepetitionType == 'month' ||
                          form.jobRepetitionType == 'quarter'
                      ">
              <a-select-option value="1"> 1号 </a-select-option>
              <a-select-option value="2"> 2号 </a-select-option>
              <a-select-option value="3"> 3号 </a-select-option>
              <a-select-option value="4"> 4号 </a-select-option>
              <a-select-option value="5"> 5号 </a-select-option>
              <a-select-option value="6"> 6号 </a-select-option>
              <a-select-option value="7"> 7号 </a-select-option>
              <a-select-option value="8"> 8号 </a-select-option>
              <a-select-option value="9"> 9号 </a-select-option>
              <a-select-option value="10"> 10号 </a-select-option>
              <a-select-option value="11"> 11号 </a-select-option>
              <a-select-option value="12"> 12号 </a-select-option>
              <a-select-option value="13"> 13号 </a-select-option>
              <a-select-option value="14"> 14号 </a-select-option>
              <a-select-option value="15"> 15号 </a-select-option>
              <a-select-option value="16"> 16号 </a-select-option>
              <a-select-option value="17"> 17号 </a-select-option>
              <a-select-option value="18"> 18号 </a-select-option>
              <a-select-option value="19"> 19号 </a-select-option>
              <a-select-option value="20"> 20号 </a-select-option>
              <a-select-option value="21"> 21号 </a-select-option>
              <a-select-option value="22"> 22号 </a-select-option>
              <a-select-option value="23"> 23号 </a-select-option>
              <a-select-option value="24"> 24号 </a-select-option>
              <a-select-option value="25"> 25号 </a-select-option>
              <a-select-option value="26"> 26号 </a-select-option>
              <a-select-option value="27"> 27号 </a-select-option>
              <a-select-option value="28"> 28号 </a-select-option>
              <a-select-option value="29"> 29号 </a-select-option>
              <a-select-option value="30"> 30号 </a-select-option>
              <a-select-option value="L-1"> 倒数第二天 </a-select-option>
              <a-select-option value="L"> 倒数第一天 </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="
            form.jobRepetitionType == 'day' ||
              form.jobRepetitionType == 'weekday' ||
              form.jobRepetitionType == 'custom'
              ? 11
              : form.jobRepetitionType == 'week' ||
                form.jobRepetitionType == 'month' ||
                form.jobRepetitionType == 'year'
                ? 5
                : 3
          ">
            <a-time-picker style="width: 100%"
                           v-model="form.endFillInTime"
                           clearable
                           format="HH:mm" />
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item label="逾期后允许填报"
                         v-if="form.endTime != null || form.endFillInTime != null"
                         prop="">
        <a-switch v-model="form.endFillIn"
                  checked-children="开"
                  un-checked-children="关" />
      </a-form-model-item>
      <a-form-model-item label="已填报允许修改"
                         prop="">
        <a-switch v-model="form.endFillIn"
                  checked-children="开"
                  un-checked-children="关" />
      </a-form-model-item>
      <a-form-model-item label="任务提醒"
                         prop="tx">
        <a-row class="row-style"
               v-for="(item, index) in form.reminds"
               :key="index">
          <a-col :span="20"
                 class="font-style">
            <div style="margin-left: 5px">
              {{ item.remindType == 0 ? '任务开始后' : '任务截止前' }}
              {{ item.unitValue }}
              {{
                item.unit == 'minute'
                  ? '分钟'
                  : item.unit == 'hour'
                    ? '小时'
                    : '天'
              }}
            </div>
          </a-col>
          <a-col :span="2">
            <a-icon style="margin-left: 10px"
                    type="edit"
                    @click="editRemind(item, index)"
                    class="font-style" />
          </a-col>
          <a-col :span="2">
            <a-popconfirm title="是否移除该项配置？"
                          placement="topRight"
                          ok-text="是"
                          cancel-text="否"
                          @confirm="confirm(index)">
              <a-icon type="delete"
                      @click="deleteRm"
                      class="font-style" />
            </a-popconfirm>
          </a-col>
        </a-row>
        <a-row>
          <a-button icon="plus"
                    style="width: 100%"
                    type="primary"
                    ghost
                    @click="addRemind">
            添加提醒
          </a-button>
        </a-row>
      </a-form-model-item>
      <a-divider orientation="left">任务接收人</a-divider>
      <a-form-model-item label="用户"
                         prop="">
        <z-select-user @change="userChange"
                       :value="userList" />
      </a-form-model-item>
      <a-form-model-item label="角色"
                         prop="">
        <z-select-role @change="roleChange"
                       v-model="roleList" />
      </a-form-model-item>
      <a-form-model-item label="单位"
                         prop="">
        <z-select-unit @change="unitChange"
                       placeholder="请选择单位"
                       v-model="unitList" />
      </a-form-model-item>

      <div style="margin-top: 20px; text-align: center">
        <ZOkButton @click="handleSubmit">
          <template solt>保存</template>
        </ZOkButton>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import { ZOkButton } from '@zh/components-ant'
import moment from 'moment'
export default {
  name: 'CronJobSetting',
  components: {
    ZOkButton
  },
  props: {},
  data () {
    return {
      plainOptions: ['Apple', 'Pear', 'Orange'],
      createTime: [],
      userList: [],
      roleList: [],
      unitList: [],
      weekStart: '1',
      weekEnd: '0',
      monthStart: '1',
      monthEnd: '30',
      jiduStart: '1',
      jiduEnd: '4',
      yearStart: moment('01-01', 'MM-DD'),
      yearEnd: moment('12-31', 'MM-DD'),
      form: {
        jobRepetitionType: 'norepeat',
        endRepetitionType: '0',
        customType: 'day',
        reminds: [],
        memberUsers: [],
        memberUnits: [],
        memberRoles: [],
        startFillInTime: moment('00:00', 'HH:mm'),
        endFillInTime: moment('23:59', 'HH:mm')
      },
      remind: {
        remindType: '0',
        unit: 'minute',
        unitValue: 0,
        remindModeArray: ['0']
      },
      reVisible: false,
      weeks: [
        { val: '2', title: '一', selected: false },
        { val: '3', title: '二', selected: false },
        { val: '4', title: '三', selected: false },
        { val: '5', title: '四', selected: false },
        { val: '6', title: '五', selected: false },
        { val: '7', title: '六', selected: false },
        { val: '1', title: '日', selected: false }
      ],
      days: [
        {
          day: '1',
          title: '1',
          selected: false
        },
        {
          day: '2',
          title: '2',
          selected: false
        },
        {
          day: '3',
          title: '3',
          selected: false
        },
        {
          day: '4',
          title: '4',
          selected: false
        },
        {
          day: '5',
          title: '5',
          selected: false
        },
        {
          day: '6',
          title: '6',
          selected: false
        },
        {
          day: '7',
          title: '7',
          selected: false
        },
        {
          day: '8',
          title: '8',
          selected: false
        },
        {
          day: '9',
          title: '9',
          selected: false
        },
        {
          day: '10',
          title: '10',
          selected: false
        },
        {
          day: '11',
          title: '11',
          selected: false
        },
        {
          day: '12',
          title: '12',
          selected: false
        },
        {
          day: '13',
          title: '13',
          selected: false
        },
        {
          day: '14',
          title: '14',
          selected: false
        },
        {
          day: '15',
          title: '15',
          selected: false
        },
        {
          day: '16',
          title: '16',
          selected: false
        },
        {
          day: '17',
          title: '17',
          selected: false
        },
        {
          day: '18',
          title: '18',
          selected: false
        },
        {
          day: '19',
          title: '19',
          selected: false
        },
        {
          day: '20',
          title: '20',
          selected: false
        },
        {
          day: '21',
          title: '21',
          selected: false
        },
        {
          day: '22',
          title: '22',
          selected: false
        },
        {
          day: '23',
          title: '23',
          selected: false
        },
        {
          day: '24',
          title: '24',
          selected: false
        },
        {
          day: '25',
          title: '25',
          selected: false
        },
        {
          day: '26',
          title: '26',
          selected: false
        },
        {
          day: '27',
          title: '27',
          selected: false
        },
        {
          day: '28',
          title: '28',
          selected: false
        },
        {
          day: '29',
          title: '29',
          selected: false
        },
        {
          day: '30',
          title: '30',
          selected: false
        },
        {
          day: '31',
          title: '31',
          selected: false
        }
      ],
      selectWeeks: [], // 每周重复-选中的星期
      selectDays: [] // 每月重复-选中的具体日期
    }
  },
  created () { },
  methods: {
    handleDay (day, i) {
      if (day.selected) {
        this.days[i].selected = false
        let rs = this.selectDays.findIndex((item) => item.day == day.day)
        let da = [...this.selectDays]
        da.splice(rs, 1)
        this.selectDays = da
      } else {
        this.days[i].selected = true
        this.selectDays.push(day)
      }
    },
    handleWeek (week, i) {
      if (week.selected) {
        this.weeks[i].selected = false
        let rs = this.selectWeeks.findIndex((item) => item.val == week.val)
        let wee = [...this.selectWeeks]
        wee.splice(rs, 1)
        this.selectWeeks = wee
      } else {
        this.weeks[i].selected = true
        this.selectWeeks.push(week)
      }
    },
    userChange (all, user) {
      const that = this
      that.form.memberUsers = []
      for (let j = 0; j < user.length; j++) {
        const us = user[j]
        that.form.memberUsers.push({
          memberId: us.id,
          memberName: us.name,
          type: 1
        })
      }
    },
    roleChange (all, role) {
      const that = this
      that.form.memberRoles = []
      for (let j = 0; j < role.length; j++) {
        const ul = role[j]
        that.form.memberRoles.push({
          memberId: ul.id,
          memberName: ul.name,
          type: 3
        })
      }
    },
    unitChange (all, unit) {
      // const that = this
      // let mbs = []
      // //删除之前的机构数据
      // for (let i = 0; i < that.form.members.length; i++) {
      //   const mb = that.form.members[i]
      //   if (mb.type != 2) {
      //     mbs.push(mb)
      //   }
      // }
      // for (let j = 0; j < unit.length; j++) {
      //   const ut = unit[j]
      //   that.form.members.push({ memberId: ut.id, memberName: ut.name, type: 2 })
      // }
      const that = this
      that.form.memberUnits = []
      for (let j = 0; j < unit.length; j++) {
        const ut = unit[j]
        that.form.memberUnits.push({
          memberId: ut.id,
          memberName: ut.name,
          type: 2
        })
      }
    },
    addRemind () {
      this.reVisible = true
      this.remind = {
        remindType: '0',
        unit: 'minute',
        unitValue: 0,
        remindModeArray: ['0']
      }
    },
    remindChange () {
      this.remind.remindMode = this.remind.remindModeArray.toString()
    },
    handleOk () {
      const that = this
      that.$refs.remind.validate((valid) => {
        let tmp = JSON.parse(JSON.stringify(that.remind))
        if (valid) {
          if (that.remind.index == undefined) {
            that.form.reminds.push(tmp)
          } else {
            that.form.reminds[that.remind.index] = tmp
          }

          that.reVisible = false
        }
      })
    },
    deleteRm () { },
    editRemind (item, index) {
      let tmp = JSON.parse(JSON.stringify(item))
      tmp.index = index
      this.remind = tmp
      this.reVisible = true
    },
    confirm (index) {
      this.form.reminds.splice(index, 1)
    },

    handleSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form)
        }
      })
    },
    // 获取不可选择的小时
    disabledStartHours () {
      if (this.form.endFillInTime) {
        let hours = []
        let hour = moment(this.form.endFillInTime).hour()
        for (let i = hour + 1; i < 24; i++) {
          hours.push(i)
        }
        return hours
      }
    },
    // 获取不可选择的分钟
    disabledStartMinutes (selectedHour) {
      if (this.form.endFillInTime) {
        let minutes = []
        let hour = moment(this.form.endFillInTime).hour()
        let minute = moment(this.form.endFillInTime).minute()
        if (selectedHour === hour) {
          for (let i = minute + 1; i < 60; i++) {
            minutes.push(i)
          }
        }
        return minutes
      }
    },
    // 获取不可选择的秒
    disabledStartSeconds (selectedHour, selectedMinute) {
      if (this.form.endFillInTime) {
        let seconds = []
        let hour = moment(this.form.endFillInTime).hour()
        let minute = moment(this.form.endFillInTime).minute()
        let second = moment(this.form.endFillInTime).second()
        if (selectedHour === hour && selectedMinute === minute) {
          for (let i = second + 1; i < 60; i++) {
            seconds.push(i)
          }
        }
        return seconds
      }
    },
    // 获取不可选择的小时
    disabledEndHours () {
      if (this.form.startFillInTime) {
        let hours = []
        let hour = moment(this.form.startFillInTime).hour()
        for (let i = 0; i < hour; i++) {
          hours.push(i)
        }
        return hours
      }
    },
    // 获取不可选择的分钟
    disabledEndMinutes (selectedHour) {
      if (this.form.startFillInTime) {
        let minutes = []
        let hour = moment(this.form.startFillInTime).hour()
        let minute = moment(this.form.startFillInTime).minute()
        if (selectedHour === hour) {
          for (let i = 0; i < minute; i++) {
            minutes.push(i)
          }
        }
        return minutes
      }
    },
    // 获取不可选择的秒
    disabledEndSeconds (selectedHour, selectedMinute) {
      if (this.form.startFillInTime) {
        let seconds = []
        let hour = moment(this.form.startFillInTime).hour()
        let minute = moment(this.form.startFillInTime).minute()
        let second = moment(this.form.startFillInTime).second()
        if (selectedHour === hour && selectedMinute === minute) {
          for (let i = 0; i < second; i++) {
            seconds.push(i)
          }
        }
        return seconds
      }
    }
  }
}
</script>
<style lang="less" scoped>
.ant-select {
  width: 100%;
}
.ant-input-number {
  width: 100%;
}
.ant-time-picker {
  width: 100%;
}

.weeks-panel {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-left: 1px solid rgb(217, 217, 217);
  &-item {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: var(--font-size-def);
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
    border-top: 1px solid rgb(217, 217, 217);
    border-right: 1px solid rgb(217, 217, 217);
    border-bottom: 1px solid rgb(217, 217, 217);
    &.active {
      color: #fff;
      background: #1890ff;
    }
  }
}
.days-panel {
  display: flex;
  flex-wrap: wrap;
  width: 355px;
  border: 1px solid rgb(217, 217, 217);
  box-sizing: border-box;
  &-item {
    position: relative;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    &.active {
      color: #fff;
      background: #1890ff;
    }
    .anticon-check {
      position: absolute;
      top: 15px;
      right: 5px;
      font-size: 12px;
      color: #1890ff;
    }
  }
}
.round-style {
  position: relative;
  .ant-select {
    width: 97%;
  }
  .title {
    position: absolute;
    // right: -24px;
    right: -3%;
    top: -10px;
  }
}
</style>